<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="餐饮管理系统">
    <meta name="keywords" content="HTML,css,餐饮,用户">
    <meta name="author" content="Marinda">
    <!-- Link Swiper's public/css -->

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>首页</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css"
        integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">
    <!-- 最新版本的 Bootstrap 核心 public/css 文件 -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
        integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <link rel="stylesheet" href="public/css/index.css">
    <link rel="stylesheet" href="public/css/swiper.min.css">
        <!--icon 矢量图标 -->
        <link rel="stylesheet"
        href="https://at.alicdn.com/t/font_2813781_x4scxr9tbd9.css?spm=a313x.7781069.1998910419.97&file=font_2813781_x4scxr9tbd9.css">
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
        integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
        crossorigin="anonymous"></script>
</head>

<body>
    <!-- 餐饮管理系统 -->
    <div class="container">
        <header class="col-xs-12 col-lg-12 col-md-12 col-sm-12">
            <div class="logo_xs_view">
                <div class="logo col-xs-10 col-md-3 col-lg-4 col-sm-4">
                    <img src="public/image/logo.png" alt="餐饮系统" class="col-xs-4 col-sm-4 col-md-6 col-lg-4" width="50px"
                        height="50px">
                </div>
                <div class="logo_xs_view_menu">
                    <span class="iconfont icon-menu" style="font-size: 30px;"></span>
                </div>
                <!-- 导航栏 -->
                <nav class="col-xs-7 col-lg-7 col-md-7 col-sm-6 nav_xs_view" style="float: right;background-color: black;margin-right: -85px;">
                    <ul>
                        <li><a href="meal.html" target="_blank"><span class="iconfont icon-menu"></span>在线点餐</a></li>
                        <li><a href="#"><span class="iconfont icon-ren"></span>会员中心</a></li>
                        <li><a href="#"><span class="iconfont icon-caidan"></span>个人中心</a></li>
                        <li><a href="#"><span class="iconfont icon-guanli"></span>在线帮助</a></li>
                    </ul>
                </nav>
            </div>
            <div class="logo col-xs-7 col-md-3 col-lg-4 logo_md_view">
                <img src="public/image/logo.png" alt="餐饮系统" class="col-xs-4 col-sm-4 col-md-4 col-lg-4" width="50px"
                    height="50px">
                <p class="col-xs-4 col-sm-4 col-md-6 col-lg-6">餐饮点餐-用户端</p>
            </div>
            <!-- 导航栏 -->
            <nav class="col-xs-6 col-lg-6 col-md-7 col-sm-6 nav_md_show">
                <ul>
                    <li><a href="meal.html" target="_self"><span class="iconfont icon-menu"></span>在线点餐</a></li>
                    <li><a href="#"><span class="iconfont icon-ren"></span>会员中心</a></li>
                    <li><a href="#"><span class="iconfont icon-caidan"></span>个人中心</a></li>
                    <li><a href="#"><span class="iconfont icon-guanli"></span>在线帮助</a></li>
                </ul>
            </nav>
        </header>
        <!-- 内容 -->
        <main>
            <h1 style="text-align: center;"><span class="iconfont icon-xinpin"
                    style="color: red;font-size: 20px;"></span> 新品来袭 <span class="iconfont icon-xinpin"
                    style="color: red;font-size: 20px;"></span></h1>
            <div class="banner">
                <!-- Swiper -->
                <div class="swiper-container">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide"><img src="public/image/b1.jpg" alt="banner"></div>
                        <div class="swiper-slide"><img src="public/image/b2.jpg" alt="banner"></div>
                        <div class="swiper-slide"><img src="public/image/b3.jpg" alt="banner"></div>
                        <div class="swiper-slide"><img src="public/image/b4.jpg" alt="banner"></div>
                        <div class="swiper-slide"><img src="public/image/b5.jpg" alt="banner"></div>
                    </div>
                    <!-- Add Arrows -->
                    <div class="swiper-button-next"></div>
                    <div class="swiper-button-prev"></div>
                </div>

                <!-- Swiper JS -->
                <script src="public/js/swiper.min.js"></script>

                <!-- Initialize Swiper -->
                <script>
                    var swiper = new Swiper('.swiper-container', {
                        navigation: {
                            nextEl: '.swiper-button-next',
                            prevEl: '.swiper-button-prev',
                        },
                    });
                </script>
            </div>
            <!-- 活动详情  -->
            <div class="activity col-xs-12 col-md-12 col-sm-12 col-lg-12">
                <h2 style="text-align: center;"><span class="iconfont icon-huodong"
                        style="color: orange;font-size: 20px;"></span> 最新活动 <span class="iconfont icon-huodong"
                        style="color: orange;font-size: 20px;"></span></h2>
                <div class="activity_item col-lg-12 col-md-12 col-xs-12 col-sm-12">
                    <div class="activity_text">
                        <h3>会员专享</h3>
                        <p>充1000元会员卡再送250元返利金额，冲2000送500元返利金额 ……</p>
                        <div class="join_button">立即参与</div>
                    </div>
                </div>
                <div class="activity_item col-lg-12 col-md-12 col-xs-12 col-sm-12">
                    <div class="activity_text">
                        <h3>新客专享</h3>
                        <p>满100减10块，满500减50，还有惊喜小礼品 ……</p>
                        <div class="join_button">立即参与</div>
                    </div>
                </div>
                <div class="activity_item col-lg-12 col-md-12 col-xs-12 col-sm-12">
                    <div class="activity_text">
                        <h3>国庆大放送</h3>
                        <p>消费满400即送一盒安慕希或特仑苏牛奶 活动时间10.1-10.7 ……</p>
                        <div class="join_button">立即参与</div>
                    </div>
                </div>
                <div class="activity_item col-lg-12 col-md-12 col-xs-12 col-sm-12">
                    <div class="activity_text">
                        <h3>开业大酬宾</h3>
                        <p>充1500元会员卡再送500元返利金额，冲5000送1500元返利金额 ……</p>
                        <div class="join_button">立即参与</div>
                    </div>
                </div>
            </div>
            <div class="meal col-xs-12 col-md-12 col-lg-12 col-sm-12">
                <h2 style="text-align: center;"><span class="iconfont icon-jingxuanyoupin"
                        style="color: green;font-size: 20px;"></span> 精品推荐 <span class="iconfont icon-jingxuanyoupin"
                        style="color: green;font-size: 20px;"></span></h2>
                <div class="meal_show_item col-xs-12 col-md-5 col-sm-12 col-lg-5">
                    <img src="public/image/meal_1.jpg" alt="菜品">
                    <p>蒜蓉炒菜心</p>
                    <p class="meal_price" style="float: right;">￥0.01元</p>
                    <div class="meal_button">添加菜单</div>
                </div>
                <div class="meal_show_item col-xs-12 col-md-5 col-sm-12 col-lg-5">
                    <img src="public/image/meal_2.jpg" alt="菜品">
                    <p>五香拌肉</p>
                    <p class="meal_price" style="float: right;">￥0.01元</p>
                    <div class="meal_button">添加菜单</div>
                </div>
                <div class="meal_show_item col-xs-12 col-md-5 col-sm-12 col-lg-5">
                    <img src="public/image/meal_12.jpg" alt="菜品">
                    <p>糖醋排骨</p>
                    <p class="meal_price" style="float: right;">￥20000.00元</p>
                    <div class="meal_button" style="margin-right: -85px;">添加菜单</div>
                </div>
                <div class="meal_show_item col-xs-12 col-md-5 col-sm-12 col-lg-5">
                    <img src="public/image/meal_4.jpg" alt="菜品">
                    <p>辣椒炒虾仁</p>
                    <p class="meal_price" style="float: right;">￥46.00元</p>
                    <div class="meal_button">添加菜单</div>
                </div>
                <div style="clear: both;"></div>
                <div class="meal_more col-lg-5" style="float: none;text-align: center;margin: 0 auto;margin-top: 30px;">
                    查询更多</div>
            </div>
        </main>
        <div style="clear:both"></div>
        <!-- 底部介绍 -->
        <footer class="col-xs-12 col-lg-12 col-md-12 col-sm-12">
            <div class="footer_introduce col-lg-12 col-xs-8 col-sm-8 col-md-8">
                <p>&copy;餐厅首页-用户端</p>
            </div>
        </footer>
    </div>
</body>
<script src="js/index.js"></script>
<script>
    $(document).ready(function()
    {
        $(".logo_xs_view_menu span").on('click',function(){
            $(".nav_xs_view").slideToggle();
        })
    })
    var time = setInterval(function()
    {
        $(".activity").fadeIn();
        clearInterval(time);
    },100)
    $(".meal").slideDown();
</script>

</html>